<template>
    <div class="body">
        <div class="list">
            <mt-navbar v-model="selected" @input="selectStatus">
                <!-- <mt-tab-item id="1">未接单</mt-tab-item> -->
                <!-- <mt-tab-item id="6">未接单</mt-tab-item> -->
                <mt-tab-item id="2">已接单</mt-tab-item>
                <mt-tab-item id="3">已接货</mt-tab-item>
                <mt-tab-item id="4">已送达</mt-tab-item>
                <mt-tab-item id="-1">退款订单</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <!-- <mt-tab-container-item id="1" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <StoreOrderList v-for="(i,k) of list" :key="k" :i="i" @onUpdate="onUpdate"></StoreOrderList>
                </mt-tab-container-item> -->
                <mt-tab-container-item id="2" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <StoreOrderList v-for="(i,k) of list" :key="k" :i="i" @onUpdate="onUpdate"></StoreOrderList>
                </mt-tab-container-item>
                <mt-tab-container-item id="3" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <StoreOrderList v-for="(i,k) of list" :key="k" :i="i" @onUpdate="onUpdate" @onOrderChange="onOrderChange"></StoreOrderList>
                </mt-tab-container-item>
                <mt-tab-container-item id="4" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <StoreOrderList v-for="(i,k) of list" :key="k" :i="i" @onUpdate="onUpdate"></StoreOrderList>
                </mt-tab-container-item>
                <mt-tab-container-item id="-2" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                    <StoreOrderList v-for="(i,k) of list" :key="k" :i="i" @onUpdate="onUpdate"></StoreOrderList>
                </mt-tab-container-item>
            </mt-tab-container>
                                <div class="hint" v-if="!list.length">暂无订单~</div>
        </div>
        <mt-button class="btn" v-if="!checkedOrders.length" @click="DeliveryType">{{deliveryType?'开始接单':'停止接单'}}</mt-button>
        <mt-button class="btn" v-else @click="batch">批量结算</mt-button>
    </div>
</template>
<script>

import {riderOrderList,setDeliveryType,riderArrive} from '../api'
import {Indicator,Toast} from 'mint-ui'
import StoreOrderList from '../components/storeOrderList'
export default {
    name:'deliverGoods',
    data() {
        return {
            list:[],
            loading:false,
            selected:"1",
            deliveryType:false,
            checkedOrders:[]
        }
    },
    components:{StoreOrderList},
    created(){
        console.log(this.$store.getters.userInfo.delivery_type);
        this.deliveryType = this.$store.getters.userInfo.delivery_type == "1"?true:false
    },
    methods:{
        DeliveryType(){
            this.deliveryType = !this.deliveryType
            const data = {
                token:this.$store.getters.token,
                user_id:this.$store.getters.userInfo.id,
                delivery_type:this.deliveryType?'1':'0'
            }
            setDeliveryType(data).then(res=>{
                console.log(res);
                if(res.code == 200){
                    Toast('状态切换成功')
                    // this.RiderOrderList();
                    console.log(data.delivery_type);
                    this.$store.commit("SET_TYPE",data.delivery_type)
                }else{
                    Toast('状态切换失败')
                }
            })
        },
        onUpdate() {
            this.RiderOrderList();
        },
        selectStatus(){
            this.list = [];
            // this.page = 1;
            this.RiderOrderList();
        },
        loadMore() {
            Indicator.open('加载中...');
            this.loading = true;
            this.RiderOrderList();
        },
        RiderOrderList(){
            let data = {
                token:this.$store.getters.token,
                user_id:this.$store.getters.userInfo.id,
                status:this.selected
            }
            riderOrderList(data).then(res=>{
                console.log(res.data);
                this.list = res.data
                Indicator.close();
            })
        },
        onOrderChange(i,checked){
            // console.log(i,checked);
            if(checked){
                this.checkedOrders.push(i);
            }else{
                let a =  this.checkedOrders.indexOf(i);
                this.checkedOrders.splice(a,1);
            }
            console.log(this.checkedOrders);
        },
        batch(){
            const data = {
                token:this.$store.getters.token,
                order_no:this.checkedOrders.toString(),
                user_id:this.$store.getters.userInfo.id
            }
            riderArrive(data).then(res=>{
                console.log(res);
                Toast(res.msg)
                if(res.code==200){
                    // this.$router.go(0);
                    Toast("批量结算成功");
                    this.RiderOrderList();
                }
            })
        }
    }
}
</script>
<style scoped>
    .body{
        height: Calc(100vh - 3rem);
        background: #f2f2f2;
    }
    .body >>> .mint-navbar .mint-tab-item.is-selected{
        border-bottom: .1rem solid #F0463C;
        color: #F0463C;
        margin-bottom: -.09375rem;
    }
    .body >>> .mint-tab-item-label{
        height: 4rem;
        font-size: 1rem;
        line-height: 1rem;
    }
    .body >>> .mint-cell-wrapper{
        font-size: 1rem;
    }
    .btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        margin: 0;
        color: #fff;
        background: #F0463C;
        height: 3rem;
        font-size: 0.8rem;
    }
    .hint {
        text-align: center;
        line-height: 6rem;
    }
    .list{
        height: Calc(100vh - 6rem);
        overflow: auto;
    }
    .picker-items,.login_message input {
        font-size: 1rem;
    }
</style>